<template>
	<div class="container">
		<div class="plugins-tips">
      陶瓷墙地砖分级分色高速在线视觉检测管理系统-检测的瓷砖结果记录
<!--			<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>-->
		</div>
		<el-card class="mgb20" shadow="hover">
			<template #header>
				<div class="content-title">最近一周色差检测情况图</div>
			</template>
			<schart class="schart" canvasId="bar" :options="options1"></schart>
		</el-card>
		<el-card class="mgb20" shadow="hover">
			<template #header>
				<div class="content-title">最近半年的色差检测趋势图</div>
			</template>
			<schart class="schart" canvasId="line" :options="options2"></schart>
		</el-card>
		<el-card class="mgb20" shadow="hover">
			<template #header>
				<div class="content-title">检测出来的缺陷类型占比图</div>
			</template>
			<schart class="schart" canvasId="pie" :options="options3"></schart>
		</el-card>
		<el-card class="mgb20" shadow="hover">
			<template #header>
				<div class="content-title">检测出来的色差类型占比图</div>
			</template>
			<schart class="schart" canvasId="ring" :options="options4"></schart>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="schart">
import Schart from 'vue-schart';

const options1 = {
	type: 'bar',
	title: {
		text: '最近一周色差检测情况图'
	},
	colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
	labels: ['周一', '周二', '周三', '周四', '周五'],
	datasets: [
		{
			label: '无色差',
			// fillColor: 'rgba(241, 49, 74, 0.5)',
			data: [234, 278, 270, 190, 230]
		},
		{
			label: '微小色差',
			data: [164, 178, 190, 135, 160]
		},
		{
			label: '大色差',
			data: [144, 198, 150, 135, 120]
		}
	]
};
const options2 = {
	type: 'line',
	title: {
		text: '最近半年的色差检测趋势图'
	},
	colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
	labels: ['6月', '7月', '8月', '9月', '10月'],
	datasets: [
		{
			label: '无色差',
			data: [234, 278, 270, 190, 230]
		},
		{
			label: '微小色差',
			data: [164, 178, 150, 135, 160]
		},
		{
			label: '大色差',
			data: [114, 138, 200, 235, 190]
		}
	]
};
const options3 = {
	type: 'pie',
	title: {
		text: '检测出来的缺陷类型占比图'
	},
	legend: {
		position: 'left'
	},
	colorList: ["#2196f3", '#673ab7', "#009688", "#1ABC9C", "#3f51b5", "#f44336", "#00bcd4"],
	labels: ['无缺陷', '边异常', '角异常', '白色点瑕疵', '浅色快瑕疵', '白色点块瑕疵', '光圈瑕疵'],
	datasets: [
		{
			data: [334, 278, 190, 235, 260, 200, 141]
		}
	]
};
const options4 = {
	type: 'ring',
	title: {
		text: '检测出来的色差类型占比图'
	},
	showValue: false,
	legend: {
		position: 'bottom',
		bottom: 40
	},
	colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
	labels: ['无色差', '微小色差', '大色差'],
	datasets: [
		{
			data: [500, 500, 500]
		}
	]
};
</script>

<style scoped>
.schart {
	width: 100%;
	height: 400px;
}

.content-title {
	font-weight: 400;
	font-size: 22px;
	color: #1f2f3d;
}
</style>
